<template>

  <a-modal
      :close-on-click-modal="false"
      :open="api.editState.visible"
      :title="api.editState.title"
      destroy-on-close
      ok-text="保存"
      @cancel="api.onCloseEdit()"
      @ok="onSubmit"
      width="800px"
  >
    <a-form
        ref="formRef"
        :model="api.editState.form"
        :rules="rules"
        :labelCol="{span: 5}"
    >
      <a-form-item label="公司名称" name="name">
        <a-input v-model:value="api.editState.form.name" allowClear placeholder="请输入公司名称"/>
      </a-form-item>

      <a-form-item label="公司LOGO名称" name="title">
        <a-input v-model:value="api.editState.form.title" allowClear placeholder="请输入LOGO名称"/>
      </a-form-item>

      <a-form-item label="公司LOGO图片" name="logo">
        <i-upload-image v-model:value="api.editState.form.logo"></i-upload-image>
      </a-form-item>

      <a-tabs >
        <a-tab-pane key="applet" tab="小程序配置">

          <a-form-item label="小程序码" name="appletImg">
            <i-upload-image v-model:value="api.editState.form.appletImg"></i-upload-image>
          </a-form-item>

          <a-form-item label="微信原始ID" name="weixinSign">
            <a-input v-model:value="api.editState.form.weixinSign" allowClear placeholder="请输入微信原始ID"/>
          </a-form-item>

          <a-form-item label="主体名称" name="principalName">
            <a-input v-model:value="api.editState.form.principalName" allowClear placeholder="请输入主体名称"/>
          </a-form-item>

          <a-form-item label="小程序名称" name="appletName">
            <a-input v-model:value="api.editState.form.appletName" allowClear placeholder="请输入小程序名称"/>
          </a-form-item>

          <a-form-item label="小程序appid" name="appletAppid">
            <a-input v-model:value="api.editState.form.appletAppid" allowClear placeholder="请输入小程序appid"/>
          </a-form-item>

          <a-form-item label="小程序秘钥" name="appletSecret">
            <a-input v-model:value="api.editState.form.appletSecret" allowClear placeholder="请输入小程序秘钥"/>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="mc" tab="支付配置">

          <a-form-item label="商户号" name="mchId">
            <a-input v-model:value="api.editState.form.mchId" allowClear placeholder="请输入商户号"/>
          </a-form-item>

          <a-form-item label="APIv2密钥" name="mchKey">
            <a-input v-model:value="api.editState.form.mchKey" allowClear placeholder="请输入APIv2密钥"/>
          </a-form-item>

          <a-form-item label="API证书" name="keyPath">
            <i-upload-file v-model:value="api.editState.form.keyPath"/>
          </a-form-item>
        </a-tab-pane>

        <a-tab-pane key="general" tab="公众号配置">

          <a-form-item label="公众号appid" name="generalAppid">
            <a-input v-model:value="api.editState.form.generalAppid" allowClear placeholder="请输入公众号appid"/>
          </a-form-item>

          <a-form-item label="公众号秘钥" name="generalSecret">
            <a-input v-model:value="api.editState.form.generalSecret" allowClear placeholder="请输入公众号秘钥"/>
          </a-form-item>

          <a-form-item label="认证的token" name="generalToken">
            <a-input v-model:value="api.editState.form.generalToken" allowClear placeholder="请输入认证的token"/>
          </a-form-item>

          <a-form-item label="认证的token秘钥" name="generalAesKey">
            <a-input v-model:value="api.editState.form.generalAesKey" allowClear placeholder="请输入认证的token秘钥"/>
          </a-form-item>

        </a-tab-pane>
      </a-tabs>

    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {CompanyApi} from "~/api/system/company.api";

interface Props {
  api: CompanyApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive({
  name: [{required: true, message: "请输入公司名称", trigger: "blur"}],
});

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.editState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseEdit();
      }
    });
  }
}
</script>

<style scoped lang="scss">

</style>
